{extend name="common/default" /}
{block name="style"}
<style>
    img {
        max-width: 100%;
    }
    .question_box{
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
    }
    .question_one{
        box-sizing: border-box;
        background-color: #9c9c9c;
        flex: 0 0 20%;
        height: 58px;
        border: 1px solid white;
        text-align: center;
        line-height: 58px;
        font-size: 24px;
        color: #fff;
    }
    .question_one.done{
        background-color: #07c160;
    }

    .answer_one{
        padding: 16px;
    }
    .answer_one .title{
        text-align: left;
        font-size: 1.2em;
    }
    .button-sp-area{
        display: flex;
        justify-content: space-between;
        padding: 0 16px;
    }
    .button-sp-area .weui-btn{
        margin: 0 !important;
    }
    .weui-cells__title{
        text-align: left;
    }
    .end_question{
        /*display: none;*/
    }
     .points{
        display: inline-block;
        padding: 0 3vw;
        color: red;
        font-size: 15vw;
        border-bottom: 1rem double red;
        transform: rotate(-7deg);
        margin: 1rem;
        line-height: 16vw;
        font-family: "Times New Roman",Georgia,Serif;
        text-shadow: 3px 2px 3px #222222;
        margin-top: -1rem;
    }
    .tips-group{
        display: flex;
    }
    .tips-group .tips{
        width: 100%;
        border: 1px solid #fff;
        padding: 16px;
        text-align: center;
        background: #383838;
        color: #fff;
    }
    .tips-group .tips span{
        display: block;
    }
    .tips-group .tips span:first-child{
        color: #ff0000;
        font-size: 2rem;
        font-weight: bolder;
    }
    .bingo{
        background: #FFC107;
        color: #fff;
        border-radius: 5px;
        border: 1px solid #fff;
    }
    .wrong{
        background-color: red !important;
    }
    .page__bd{
        overflow: scroll;
    }
    .page__ft{
        padding-top: 16px;
        background: #fff;
    }
    .answer_box{
        padding-bottom: 100px;
    }
</style>
{/block}
{block name="container"}
<div class="container">
    <div class="page js_show" id="page_rexam">
        <div class="page__hd">
            <h1 class="page__title">{$one.name}</h1>
            <p class="page__desc">{$one.content}</p>
        </div>
        <div class="page__bd page__bd_spacing">
            <div class="question_box">
                {foreach name="question" key="key" item="vo"}
                <div class="question_one {$answer_one[$vo]['css']|default=''}" data-key="{$key+1}" data-qid="{$vo}" id="questionOne{$vo}">
                    <input type="hidden" name="question{$vo}" value="{$answer_one[$vo]['value']|default=''}"  id="question{$vo}"/>
                    {$key+1}
                </div>
                {/foreach}
            </div>
        </div>
        <div class="page__ft page__bd_spacing">
            {if condition="$one['pointsdata'] eq 1"}
            <h1><span class="points">{$answer.points}</span></h1>
            {/if}
            <div class="tips-group">
                <div class="tips">
                    <span>{$answer.question_count}</span>
                    <span>题数</span>
                </div>
                <div class="tips">
                    <span>{$answer.right_count}</span>
                    <span>答对</span>
                </div>
                <div class="tips">
                    <span>{$answer.question_count - $answer.right_count}</span>
                    <span>答错</span>
                </div>
            </div>
        </div>
    </div>
    <div class="page" id="page_answer" style="display: none;">
        <div class="page__bd page__bd_spacing" style="text-align: center;height: 100%;">
            <p>&nbsp;</p>
            <div class="weui-slider-box">
                <div id="slider" class="weui-slider">
                    <div class="weui-slider__inner">
                        <div id="sliderTrack" style="width: 0%;" class="weui-slider__track"></div>
                        <div id="sliderHandler"  style="left: 0%;" class="weui-slider__handler"></div>
                    </div>
                </div>
                <div id="sliderValue" class="weui-slider-box__value"><span id="currentStep">1</span>/<span>{$answer.question_count}</span></div>
            </div>
            <div class="answer_box" id="answerBox"></div>
        </div>
        <div class="page__ft j_bottom" style="background: #eeeeee;">
            <div class="button-sp-area">
                <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary pre_question">上一题</a>
                <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary end_question">回总览</a>
                <a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary nxt_question">下一题</a>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="javascript"}
<script src="__ADDON__/jquery.tmpl.js"></script>
<script src="__ADDON__/jquerysession.js"></script>
<script id="tplOne" type="text/html">
    <div class="answer_one">
        <h2 class="title">${title}</h2>
        <p>{{html content}}</p>
    </div>
    <div class="weui-cells__title">单选题</div>
    <div class="weui-cells weui-cells_radio">
        {{each(i,v) options_json}}
        <label class="weui-cell weui-check__label" for="r${i}" data-answer="${v.answer}" data-type="1">
            <div class="weui-cell__bd">${v.value}</div>
            <div class="weui-cell__ft">
                <input required type="radio" class="weui-check" name="answer${id}" value="${v.key}" id="r${i}" data-qid="${id}" disabled="disabled">
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        {{/each}}
    </div>
    <h2>&nbsp;</h2>
    <div class="weui-cells__title">解析</div>
    <div>{{html answercontent}}</div>
</script>
<script id="tplTwo" type="text/html">
    <div class="answer_one">
        <h2 class="title">${title}</h2>
        <p>{{html content}}</p>
    </div>
    <div class="weui-cells__title">多选题</div>
    <div class="weui-cells weui-cells_radio">
        {{each(i,v) options_json}}
        <label class="weui-cell weui-check__label" for="r${i}" data-answer="${v.answer}" data-type="2">
            <div class="weui-cell__bd">${v.value}</div>
            <div class="weui-cell__ft">
                <input type="checkbox" class="weui-check" name="answer${id}" value="${v.key}" id="r${i}" data-qid="${id}" disabled="disabled">
                <i class="weui-icon-checked"></i>
            </div>
        </label>
        {{/each}}
    </div>
    <h2>&nbsp;</h2>
    <div class="weui-cells__title">解析</div>
    <div>{{html answercontent}}</div>
</script>
<script id="tplThr" type="text/html">
    <div class="answer_one">
        <h2 class="title">${title}</h2>
        <p>{{html content}}</p>
    </div>
    <div class="weui-cells__title">判断题</div>
    <div class="weui-cells weui-cells_radio">
        <label class="weui-cell weui-check__label" for="r0" data-answer="${judgedata}" data-value="0" data-type="3">
            <div class="weui-cell__bd">错误</div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="answer${id}" value="0" id="r0" data-qid="${id}" disabled="disabled">
                <i class="weui-icon-checked"></i>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="r1" data-answer="${judgedata}" data-value="1" data-type="3">
            <div class="weui-cell__bd">正确</div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="answer${id}" value="1" id="r1" data-qid="${id}" disabled="disabled">
                <i class="weui-icon-checked"></i>
            </div>
        </label>
    </div>
    <h2>&nbsp;</h2>
    <div class="weui-cells__title">解析</div>
    <div>{{html answercontent}}</div>
</script>

<script type="text/javascript">
    var qall = {$answer.question_count};      //题目总量
    var step = 100/qall;                      //答题进度
    var qnum = 0;                              //当前答题序号
    var total = 0;                            //已答题数

    function slider_fresh(){
        var wide = qnum*step;
        $("#sliderTrack").css("width",wide+'%');
        $("#sliderHandler").css("left",wide+'%');
        $("#currentStep").html(qnum);
    }

    function btn_fresh(){
        $(".pre_question").removeClass("weui-btn_disabled");
        $(".nxt_question").removeClass("weui-btn_disabled");
        if(qnum==1){
            $(".pre_question").addClass("weui-btn_disabled");
        }
        if(qnum==qall){
            $(".nxt_question").addClass("weui-btn_disabled");
        }
    }

    function load(){
        if(qnum == 0){
            $("#page_answer").removeClass('js_show');
            $("#page_rexam").addClass('js_show');
            $("#page_answer").hide();
            $("#page_rexam").show();
            return false;
        }else{
            $("#page_rexam").removeClass('js_show');
            $("#page_answer").addClass('js_show');
            $("#page_rexam").hide();
            $("#page_answer").show();
        }
        $.ajax({
            type: 'POST',
            url: "{:addon_url('rexam/answer/question')}",
            data: {
                'qnum':qnum,
                'rid':"{$answer.rexam_id}",
                'ana':1
            },
            dataType: 'json',
            success: function (res) {
                if (res.code == 1) {
                    btn_fresh();
                    var question = res.data.question;

                    $( "#answerBox" ).empty();
                    switch(question['typedata']){
                        case '1'://单选
                            $( "#tplOne" ).tmpl( question ).appendTo( "#answerBox" );
                            if($('#questionOne'+question['id']).hasClass('done')){
                                $('#answerBox input[type="radio"]').each(function(){
                                    if($(this).val() == $('#question'+question['id']).val()){
                                        $(this).attr('checked', 'checked');
                                    }
                                })
                            }
                            break;
                        case '2'://多选
                            $( "#tplTwo" ).tmpl( question ).appendTo( "#answerBox" );
                            if($('#questionOne'+question['id']).hasClass('done')){
                                var ans = $('#question'+question['id']).val().split(',');
                                $('#answerBox input[type="checkbox"]').each(function(){
                                    if($.inArray($(this).val(), ans) >= 0){
                                        $(this).attr('checked', 'checked');
                                    }
                                })
                            }
                            break;
                        case '3'://判断
                            $( "#tplThr" ).tmpl( question ).appendTo( "#answerBox" );
                            if($('#questionOne'+question['id']).hasClass('done')){
                                $('#answerBox input[type="radio"]').each(function(){
                                    if($(this).val() == $('#question'+question['id']).val()){
                                        $(this).attr('checked', 'checked');
                                    }
                                })
                            }
                            break;
                    }
                    $(".weui-check__label").each(function(){
                        switch ($(this).data("type")){
                            case 3:
                                if($(this).data("answer") == $(this).data("value")){
                                    $(this).addClass('bingo');
                                }
                                break;
                            case 1:
                            case 2:
                            default:
                                if($(this).data("answer") == 1){
                                    $(this).addClass('bingo');
                                }
                                break;
                        }
                    })
                }
            }
        })
    }

    $(function () {
        weui.slider('#slider', {
            step: step,
            defaultValue: step*qnum,
            onChange: function(percent){
//                console.log(percent,step);
//                qnum = Math.round(percent/step);
//                console.log(qnum);
//                load();
//                slider_fresh();
            }
        });

        $(".question_one").click(function(){
            qnum = $(this).data('key');
            load();
            slider_fresh();
        })

        $(".pre_question").click(function(){
            if($(this).hasClass('weui-btn_disabled'))return false;
            qnum--;
            load();
            slider_fresh();
        })
        $(".nxt_question").click(function(){
            if($(this).hasClass('weui-btn_disabled'))return false;
            qnum++;
            load();
            slider_fresh();
        })
        $(".end_question").click(function(){
            qnum = 0;
            load();
        })

    });
</script>
{/block}
